<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入vue.js-->
    <script src="js/vue.js"></script>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <!--一定要先引入vue.js再引入index.js因为elementui是基于vue.js实现的,如果不先引入vue.js elementui的js无用-->
    <script src="element-ui/lib/index.js"></script>
    <!--导入axios-->
    <script src="js/axios-0.18.0.js"></script>


</head>
<body>
<style>
    .el-header{
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
    }

</style>

<div id="app">
    <el-container >
        <el-header style="font-size:40px;">-----------------------实验报告上传系统-----------------------</el-header>
        <el-container>
            <el-aside width="200px" >
                <!--左侧导航栏-->
                <el-menu :default-openeds="['1', '3']">
                    <el-submenu index="1">

                        <template slot="title"><i class="el-icon-message"></i>人员班级管理</template>
                        <el-menu-item-group>
                            <el-menu-item index="1-1" @click="ToClass">班级管理</el-menu-item>
                            <el-menu-item index="1-2" @click="selectTeacher">教师管理</el-menu-item>
                            <el-menu-item index="1-3" @click="ToStudent">学生管理</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>

            </el-aside>
            <el-main>
                <!--条件查询表单-->
                <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                    <el-form-item label="教师编号">
                        <el-input v-model="searchForm.tno" placeholder="教师编号"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名">
                        <el-input v-model="searchForm.username" placeholder="姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-select v-model="searchForm.gender" placeholder="性别">
                            <el-option label="男" value="1"></el-option>
                            <el-option label="女" value="2"></el-option>
                            <el-option label="全部" value=""></el-option>

                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="selectByCondition">查询</el-button>
                    </el-form-item>
                </el-form>

                <div align="left">
                    <!--批量删除按钮-->
                    <el-button type="danger"  @click="deleteHandleByIds()">批量删除</el-button>
                    <!--添加员工按钮-->
                    <el-button type="primary" @click="dialogFormVisible = true">新增教师</el-button>
                </div>
                <!--添加表单-->
                <el-dialog title="新增教师" :visible.sync="dialogFormVisible">
                    <el-form :model="addForm">
                        <el-form-item label="教师编号" label-width="120px">
                            <el-input v-model="addForm.tno" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="用户名" label-width="120px">
                            <el-input v-model="addForm.username" autocomplete="off"></el-input>
                        </el-form-item>

                        <el-form-item label="性别" label-width="120px" align="left">
                            <el-select v-model="addForm.gender" placeholder="性别" >
                                <el-option label="男" :value="1"></el-option >
                                <el-option label="女" :value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="邮箱" label-width="120px">
                            <el-input v-model="addForm.email" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="addHandle">确 定</el-button>
                    </div>
                </el-dialog>

                <!--编辑表单-->
                <el-dialog title="编辑员工信息" :visible.sync="updateDialogFormVisible">
                    <el-form :model="updateForm">
                        <el-form-item label="教师编号" label-width="120px">
                            <el-input v-model="updateForm.tno" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="用户名" label-width="120px">
                            <el-input v-model="updateForm.username" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="密码" label-width="120px">
                            <el-input v-model="updateForm.password" autocomplete="off"></el-input>
                        </el-form-item>

                        <el-form-item label="性别" label-width="120px" align="left" prop="updateForm.gender">
                            <el-select v-model="updateForm.gender" placeholder="性别" >
                                <el-option label="男" :value="1"></el-option >
                                <el-option label="女" :value="2"></el-option><!--value必须要加":",否则无法渲染成男女-->
                            </el-select>
                        </el-form-item>
                        <el-form-item label="邮箱" label-width="120px">
                            <el-input v-model="updateForm.email" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="updateDialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="updateHandle">确 定</el-button>
                    </div>
                </el-dialog>


                <!--表格-->
                <el-table :data="tableData"
                          border
                          ref="multipleTable"
                          tooltip-effect="dark"
                          @selection-change="handleSelectionChange">>

                    <!--批量删除多选框-->
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>

                    <el-table-column prop="tno" label="教师编号" width="120" >
                    </el-table-column>

                    <el-table-column prop="username" label="姓名" width="120" >
                    </el-table-column>

                    <el-table-column prop="password" label="密码" width="120" >
                    </el-table-column>

                    <el-table-column prop="gender" label="性别" width="120">
                        <template slot-scope="scope">
                            {{scope.row.gender==1?"男":"女"}}
                        </template>
                    </el-table-column>

                    <el-table-column prop="email" label="邮箱" width="200" >
                    </el-table-column>


                    <el-table-column  label="操作">
                        <template slot-scope="scope">
                        <el-button type="primary" plain @click="updateHandleById(scope.row.tno)">编辑</el-button>
                        <el-button type="danger" plain @click="deleteHandleById(scope.row.tno)">删除</el-button>
                        </template>
                    </el-table-column>



                </el-table>
                <!-- Pagination分页 -->
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    background
                    layout="sizes,prev, pager,
                    next,jumper,total"
                    :total="total">
                </el-pagination>
            </el-main>
        </el-container>
    </el-container>

</div>

</body>
</html>

<script>
    new Vue({
        el: "#app",
        data:{
            updateDialogFormVisible: false,
            addForm:{
                tno: 2,
                username:'李老师',
                gender: 1,
                email: "1552005509@qq.com"
            },
            updateForm:{
                tno: '',
                username:'',
                gender: '',
                email: ''
            },
            dialogFormVisible: false,
            multipleSelection: [],
            total:1000,
            page: 1,
            pageSize: 10,
            searchForm: {
                tno:'',
                username: '',
                gender: ''
            },
            tableData:[{
                "tno": 10085,
                "username": "谢逊",
                "gender": 1,
                "password": "123456",
                "email": "1552005509@qq.com"
            },{
                "tno": 10086,
                "username": "谢文健",
                "gender": 2,
                "password": "123456",
                "email": "1552005509@qq.com"
            }]
        },
        methods:{
            updateHandleById(tno){
                this.updateDialogFormVisible=true;
                axios.get("/teachers/"+tno).then(res=>{
                    if (res.data.code === 1) {
                        this.updateForm=res.data.data;
                        this.$message.success('回显查询成功！')
                    } else {
                        this.$message.error(res.data.msg || '操作失败')
                    }
                })
            },
            updateHandle(){
                axios.put("/teachers",{
                    ...this.updateForm
                }).then(res=>{
                    this.updateDialogFormVisible=false;
                    this.updateForm=[];
                    this.selectTeacher();
                })

            },
            addHandle(){
                axios.post("/teachers",{
                    ...this.addForm
                }).then(res=>{
                    this.addForm=[];
                    this.dialogFormVisible=false;
                    this.selectTeacher();
                })
            },
            deleteById(id){
                axios.delete("/teachers/"+id).then(res=>{
                    if (res.data.code === 1) {
                        this.$message.success('删除成功！')
                    } else {
                        this.$message.error(res.data.msg || '操作失败')
                    }
                    this.selectTeacher();
                })
            },
            deleteHandleById(id){
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    'confirmButtonText': '确定',
                    'cancelButtonText': '取消',
                    'type': 'warning'
                }).then(() => {
                    this.deleteById(id);
                })

            },
            deleteByIds(ids,url){
                axios.delete(url).then(res=>{
                    if (res.data.code === 1) {
                        this.$message.success('删除成功！')
                    } else {
                        this.$message.error(res.data.msg || '操作失败')
                    }
                    //必须放在axios里面,否则由于是异步请求,可能selectTeacher在delete之前执行,就刷新不了页面
                    this.selectTeacher();
                });

            },
            deleteHandleByIds(){
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    'confirmButtonText': '确定',
                    'cancelButtonText': '取消',
                    'type': 'warning'
                }).then(() => {
                    var ids=[]; var url="/teachers/";
                    var len=this.multipleSelection.length;
                    for(let i=0;i<len;i++){
                        ids[i]=this.multipleSelection[i].tno;
                        url=url+ids[i];
                        if(i<len-1){
                            url=url+",";
                        }
                    }
                    this.deleteByIds(ids,url);
                    console.log(url);
                    console.log(this.multipleSelection.length)
                })
            },
            selectTeacher(){
                console.log(this.page);
                console.log(this.pageSize);
                axios.get("/teachers?page="+ this.page+"&pageSize="+this.pageSize).then(res=>{
                    console.log(this.page+"-"+this.pageSize);
                    if(res.data.code!=1){
                        alert(res.data.msg);
                    } else{
                        this.total=res.data.data.total;
                        this.tableData=res.data.data.rows;
                    }

                })
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //ctrl+f快速搜索定位函数所在位置
            selectByCondition() {
                axios.get("/teachers?page="+ this.page+"&pageSize="+this.pageSize+"&tno="+this.searchForm.tno
                    +"&username="+this.searchForm.username+"&gender="+this.searchForm.gender).then(res=>{
                    console.log(this.page+"-"+this.pageSize);
                    if(res.data.code!=1){
                        alert(res.data.msg);
                    } else{
                        this.total=res.data.data.total;
                        this.tableData=res.data.data.rows;
                    }

                })
                console.log(this.searchForm);

            },
            handleSizeChange(val) {
                this.pageSize=val;
                this.selectTeacher();
            },
            handleCurrentChange(val) {
                this.page=val;
                this.selectTeacher();
            },
            ToStudent(){
                window.location.href = 'student.html';
            },
            ToClass(){
                window.location.href = 'class.html'
            }
        },
        mounted(){
            if(localStorage.getItem("user")==null){
                window.location.href='login.html';
            }
            this.selectTeacher();
        }
    })
</script>